---
title: Styling
description: "Styling in ReScript & React"
canonical: "/docs/react/styling"
section: "Main Concepts"
order: 9
---

# Styling

React comes with builtin support for inline styles, but there are also a number of third party libraries for styling React components. You might be comfortable with a specific setup, like:

- Global CSS / CSS modules
- CSS utility libraries (`tailwindcss`, `tachyons`, `bootstrap` etc.)
- CSS-in-JS (`styled-components`, `emotion`, etc.)

If they work in JS then they almost certainly work in ReScript. In the next few sections, we've shared some ideas for working with popular libraries. If you're interested in working with one you don't see here, search the [package index](/packages) or post in [the forum](https://forum.rescript-lang.org).

## Inline Styles

This is the most basic form of styling, coming straight from the 90s. You can apply a `style` attribute to any DOM element using the `style` prop.

```res example
let make = () =>
  <div style={{ color: "#444444", fontSize: "68px"}} />
```

## Global CSS

Use a `%%raw` expression to import CSS files within your ReScript / React component code:

```res example
// in a JS module setup
%%raw("import './styles/main.css'")

// or with CommonJS
%%raw("require('./styles/main.css')")
```

## CSS Modules

[CSS modules](https://github.com/css-modules/css-modules) can be imported like any other JS module. The imported value is a JS object, with attributes equivalent to each classname defined in the CSS file.

As an example, let's say we have a CSS module like this:

```css
/* styles.module.css */

.root {
  color: red;
}
```

We now need to create a module binding that imports our styles as a JS object:

```res example
// {..} means we are handling a JS object with an unknown
// set of attributes
@module external styles: {..} = "./styles.module.css"

// Use the obj["key"] syntax to access any classname within our object
let app = <div className={styles["root"]} />
```

**Note:** `{..}` is an open [JS object type](../manual/object.mdx#type-declaration), which means the type checker will not type check correct classname usage. If you want to enforce compiler errors, replace `{..}` with a concrete JS object type, such as `{"root": string}`.

## CSS Utility Libraries

### Tailwind

CSS utility libraries like [TailwindCSS](https://tailwindcss.com) usually require some globally imported CSS.

First, create your TailwindCSS main entrypoint file:

```css
/* main.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
```

Then, import your `main.css` file in your ReScript / React application:

```res example
// src/App.res

%%raw("import './main.css'")
```

Utilize ReScript's pattern matching and string interpolations to combine different classnames:

```res example
@react.component
let make = (~active: bool) => {
  let activeClass = if active {
    "text-green-600"
  }
  else {
    "text-red-600"
  }

  <div className={`border border-black ${activeClass}`}>
    {React.string("Hello World")}
  </div>
}
```

> **Hint:** `rescript-lang.org` actually uses TailwindCSS under the hood! Check out our [codebase](https://github.com/rescript-lang/rescript-lang.org) to get some more inspiration on usage patterns.

## CSS-in-JS

There's no way we could recommend a definitive CSS-in-JS workflow, since there are many different approaches on how to bind to CSS-in-JS libraries (going from simple to very advanced).

For demonstration purposes, let's create some simple bindings to e.g. [`emotion`](https://emotion.sh/docs/introduction) (as described [here](https://github.com/bloodyowl/rescript-react-starter-kit/blob/eca7055c59ba578b2d1994fc928d8f541a423e74/src/shared/Emotion.res)):

```res example
// src/Emotion.res

@module("@emotion/css") external css: {..} => string = "css"
@module("@emotion/css") external rawCss: string => string = "css"
@module("@emotion/css") external keyframes: {..} => string = "css"
@module("@emotion/css") external cx: array<string> => string = "cx"

@module("@emotion/css") external injectGlobal: string => unit = "injectGlobal"
```

This will give you straight-forward access to `emotion`'s apis. Here's how you'd use them in your app code:

```res
let container = Emotion.css({
  "color": "#fff",
  "backgroundColor": "red"
})

let app = <div className={container} />
```

You can also use submodules to organize your styles more easily:

```res
module Styles = {
  open Emotion
  let container = css({
    "color": "#fff",
    "backgroundColor": "red"
  })
  // your other declarations
}

let app = <div className={Styles.container} />
```

Please note that this approach will not check for invalid css attribute names. If you e.g. want to make sure that only valid CSS attributes are being passed, you could define your `css` function like this as well:

```res example
@module("@emotion/css") external css: ReactDOM.Style.t => string = "css"

// Usage is slightly different (and probably less ergonomic)
let container = {padding: "20px"}->css

let app = <div
  className={container}
/>
```

Here we used the already existing `React.Style.t` type to enforce valid CSS attribute names.
Last but not least, you can also bind to functions that let you use raw CSS directly:

```res
let container = Emotion.rawCss(`
  color: #fff;
  background-color: red;
`)

let app = <div className={container} />
```

Please keep in mind that there's a spectrum on how type-safe an API can be (while being more / less complex to handle), so choose a solution that fits to your team's needs.
